﻿@using DAL
@model HomeStayWebCP.Models.BusinessObject.PostObject
@{
    ViewBag.Title = "Edit Post";
}
<link href="../../Content/Styles/checkboxstyle.css" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link href="../../Content/Styles/ErrorStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

    //****Hoagdx - Begin Script****

    var Chmap;
    var obj = null;

    function mapClick(location) {
        if (obj != null) {
            obj.setMap(null);
        }
        var marker = new google.maps.Marker({
            position: location,
            map: Chmap
        });
        obj = marker;
        Chmap.setCenter(marker.getPosition());

        var infom = location.lat() + ',' + location.lng();
        document.getElementById("House_Ordinate").value = infom;
    }

    function search() {
        var addressField = document.getElementById('House_AddressDetail');
        var geocoder = new google.maps.Geocoder();
        //alert("go to search");
        //alert(addressField.value);
        geocoder.geocode(
                    { 'address': addressField.value },
                    function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            var loc = results[0].geometry.location;
                            // use loc.lat(), loc.lng()
                            var myLatlng = new google.maps.LatLng(loc.lat(), loc.lng());
                            mapClick(myLatlng);
                            Chmap.setZoom(12);

                            //alert("Founded");
                        } else {
                            alert("Your address cann't be found.");
                        }
                    }
                );
    }
    ;

    function initializes() {
        //alert('go1');
        var xtext = document.getElementById("House_Ordinate").value;
        var icon = new google.maps.MarkerImage("/Content/images/icons/houseIcon.png", null, null, null,
            new google.maps.Size(32, 32));
        var textSplit = xtext.split(",");
        //declare points on Map
        var pointCenter = null;
        pointCenter = new google.maps.LatLng(textSplit[0], textSplit[1]);
        //alert('g4');
        //declare Map properties
        var ChmapProp = {
            center: pointCenter,
            zoom: 12,
            //disableDefaultUI:false, //dissable UI control
            panControl: true,
            //zoomControl: true,
            //            zoomControlOptions: {
            //            style: google.maps.ZoomControlStyle.LARGE,
            //            position: google.maps.ControlPosition.BOTTOM_LEFT
            //            },
            mapTypeControl: true,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: false,
            rotateControl: false,
            disableDoubleClickZoom: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        Chmap = new google.maps.Map(document.getElementById("googleMap"), ChmapProp);

        //add event listener when user click to somewhere on map
        google.maps.event.addListener(Chmap, 'dblclick', function (event) { mapClick(event.latLng); });
        var marker = new google.maps.Marker({
            position: pointCenter,
            icon: icon,
            map: Chmap
        });
    }

    //end initialize   

    function placeMarker() {
        if (mapZoom == map.getZoom()) {
            var marker = new google.maps.Marker({
                position: location,
                map: map
            });
        }
    }

    window.onload = function () {
        initializes();
    }
    google.maps.event.addDomListener(window, 'load', initializes);
    //End Map

    //    $(function () {
    //        $("#ddlprovince").change(function (evt) {
    //            var txt = $("#ddlprovince option:selected").text();
    //            //alert(txt);

    //            $("#address_recommend").val(txt);
    //            search1();
    //            var d = document.getElementById("ddlprovince").i;
    //            {
    //                var selectedProvince = $(this).val();
    //                if (selectedProvince == '')
    //                    selectedProvince = -1;
    //                if (selectedProvince != null) {
    //                    $.ajax({
    //                        url: "/Posts/GetDistrictCbb",
    //                        type: 'POST',
    //                        data: { province: selectedProvince },
    //                        success: function (response) {
    //                            $("#ddldistrict").replaceWith(response)

    //                        },
    //                        error: function (xhr) {
    //                            alert("Something went wrong, please try again");
    //                        }
    //                    });

    //                } else {

    //                }
    //            }
    //        });
    //    });
    //End Script
</script>
<style>
    .error
    {
        display: none;
        height: 7px;
        width: 800px;
        float: left;
        margin-left: 10px;
        border-radius: 5px;
    }
    #headbox
    {
        height: 30px;
        background-color: #c30;
        text-align: left;
        font-size: 1.5em;
        padding-left: 10px;
        color: white;
        padding-top: 5px;
    }
    .infobox
    {
        width: 1120px;
        height: 266px;
        margin: 0 auto;
        background-color: #D2D29F;
        margin-top: 10px;
        border-radius: 5px 5px 5px 5px;
        padding-bottom: 10px;
    }
    .leftlabel
    {
        float: left;
        width: 150px;
        margin-top: 10px;
        margin-left: 10px;
        font-size: 1.1em;
        color: black;
    }
    .editor-field
    {
        float: left;
        margin-top: 10px;
        margin-left: 10px;
    }
    .field
    {
        clear: both;
    }
    #SearchHomestay
    {
        margin-top: 20px;
        margin-left: 150px;
        font-size: 1.1em;
    }
    .headerbox
    {
        width: auto;
        height: 25px;
        margin: 0 auto;
        background-color: white;
        color: brown;
        padding-left: 5px;
    }
    .checkbox
    {
        margin-left: 120px;
    }
    input, textarea
    {
        color: black !important;
    }
    #container
    {
        width: 1140px;
        position: relative;
        margin: 0 auto;
        margin-top: 1px; /*height: auto;*/ /*background-image: url(../../images/MasterPage/bg-container.jpg);*/
        height: 1400px;
        box-shadow: -7px 1px 14px rgba(0, 0, 0, 0.5);
        padding-bottom: 100px;
        min-height: 764px;
    }
    .field-validation-valid
    {
        color: darkred;
    }
    .field-validation-error
    {
        float: left !important;
        color: red;
    }
</style>
<div id="headbox" class="rounded-corners">
    Edit Post
</div>
@if (HttpContext.Current.Session["username"] != null)
{

    using (Html.BeginForm("EditPost", "Posts", FormMethod.Post, new { enctype = "multipart/form-data", id = "submitform" }))
    {
    @Html.ValidationSummary(true)
   
    
    <div id="generalinfo" class="infobox" style="height: 300px">
        <div class="headerbox">
            Post Information</div>
        <div class="field">
            <span class="leftlabel">Title(*)</span>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.Title, new { style = "width:700px" })
                @Html.ValidationMessageFor(model => model.Title)
            </div>
        </div>
        @*Introduction*@
        <div class="field">
            <span class="leftlabel">Introduction</span>
            <div class="editor-field">
                @Html.TextAreaFor(model => model.Content, new { style = "width:800px;height:80px" })
                @Html.ValidationMessageFor(model => model.Content)
            </div>
        </div>
        @*Type of Homestay*@
        <div class="field">
            <span class="leftlabel">Type of House(*)</span>
            <div class="editor-field" style="">
                @Html.DropDownListFor(model => model.House.TypeOfHouseID, (IEnumerable<SelectListItem>)ViewBag.TypeofHouse, "Select-Type", new { style = "width:240px", id = "TypeOfHouseID" })
                @Html.ValidationMessageFor(model => model.House.TypeOfHouseID)
            </div>
        </div>
        <div class="field">
            <span class="leftlabel">Address(*)</span>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.House.AddressDetail, new { style = "width:340px" })
                @Html.ValidationMessageFor(model => model.House.AddressDetail)
            </div>
        </div>
    </div>
    <div class="infobox" style="height: 570px; width: 1120px; margin-left: 10px; float: left;position: relative">
        @*Map Begin*@ <span class="leftlabel" style="width: 200px; margin-bottom: 10px">Locate
            your house on map</span>
        <div class="editor-field">
            @Html.HiddenFor(model => model.House.Ordinate, new { style = "width:140px" })
        </div>
         <label style="position: absolute;top:10px;left:300px">(You can click Locate button or double click your location on map)</label>
        <div>
          @*  <input type="text" id="search_address" value="" style="margin-top: 5px; width: 360px;" />*@
            <input type="button" value="Locate" onclick="search();" style="width: 100px; background-color: sienna;color: whitesmoke !important;position: absolute;left: 190px;top: 5px;" /><br />
       <input type="text" id="address_recommend" value="" style="display: none" />
        </div>
        <br />
        <div id="googleMap" style="width: 600px; height: 480px; margin: 10px 10px 10px 10px">
        </div>
        @*Map End*@
    </div>
    <div class="infobox" style="height: 250px; width: 578px; margin-left: 10px; float: left">
        <div class="headerbox">
            Contact Information</div>
        <div class="field">
            <span class="leftlabel">Contact Name(*)</span>
            <div class="editor-field" style="float: none">
                @Html.TextBoxFor(model => model.ContactName, new { style = "width:340px" })
                @Html.ValidationMessageFor(model => model.ContactName, "", new { style = "float:left;margin-left:150px;" })
            </div>
        </div>
        <div class="field">
            <span class="leftlabel">Mobile Phone(*)</span>
            <div class="editor-field" style="float: none">
                @Html.TextBoxFor(model => model.MobilePhone, new { style = "width:340px" })
                @Html.ValidationMessageFor(model => model.MobilePhone, "", new { style = "float:left;margin-left:150px;" })
            </div>
        </div>
        <div class="field">
            <span class="leftlabel">Telephone</span>
            <div class="editor-field" style="float: none">
                @Html.TextBoxFor(model => model.TelePhone, new { style = "width:340px" })
                @Html.ValidationMessageFor(model => model.TelePhone, "", new { style = "float:left;margin-left:150px;" })
            </div>
        </div>
        <div class="field">
            <span class="leftlabel">Email(*)</span>
            <div class="editor-field" style="float: none">
                @Html.TextBoxFor(model => model.Email, new { style = "width:340px" })
                @Html.ValidationMessageFor(model => model.Email, "", new { style = "float:left;margin-left:150px;" })
            </div>
        </div>
    </div>

    <div class="infobox" style="width: 530px; margin-left: 10px; float: left; height: 250px;">
        <div class="headerbox" style="width: 524px; margin: 0">
            Price Information</div>
        <div class="field">
            <span class="leftlabel">Price Perday</span>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.House.PricePerDay, new { style = "width:240px", @class = "price", @required = "" })
                @Html.ValidationMessageFor(model => model.House.PricePerDay, "", new { style = "display:none" })
            </div>
        </div>
        <div class="field">
            <span class="leftlabel">Price Perweek</span>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.House.PricePerWeek, new { style = "width:240px", @class = "price", @required = "" })
                @Html.ValidationMessageFor(model => model.House.PricePerWeek, "", new { style = "display:none" })
            </div>
        </div>
        <div class="field">
            <span class="leftlabel">Price Permonth</span>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.House.PricePerMonth, new { style = "width:240px", @class = "price", @required = "" })
                @Html.ValidationMessageFor(model => model.House.PricePerMonth, "", new { style = "display:none" })
            </div>
        </div>
    </div>
    <div class="infobox" style="width: 529px; margin-left: 10px; float: left; height: 210px;">
        <div class="headerbox" style="width: 524px; margin: 0">
            More Information</div>
        <div class="field">
            <span class="leftlabel">No. BedRoom</span>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.House.NumBadroom, new { style = "width:240px", @class = "number", @required = "" })
                @Html.ValidationMessageFor(model => model.House.NumBadroom, "", new { style = "display:none" })
            </div>
        </div>
        <div class="field">
            <span class="leftlabel">No. Sitting Room</span>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.House.NumSittingRoom, new { style = "width:240px", @class = "number", @required = "" })
                @Html.ValidationMessageFor(model => model.House.NumSittingRoom, "", new { style = "display:none" })
            </div>
        </div>
        <div class="field">
            <span class="leftlabel">No. WC/Bathroom</span>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.House.NumOfWC, new { style = "width:240px", @class = "number", @required = "" })
                @Html.ValidationMessageFor(model => model.House.NumOfWC, "", new { style = "display:none" })
            </div>
        </div>
        <div class="field">
            <span class="leftlabel">No. Storey</span>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.House.Storey, new { style = "width:240px", @class = "number", @required = "" })
                @Html.ValidationMessageFor(model => model.House.Storey, "", new { style = "display:none" })
            </div>
        </div>
        <div class="editor-field">
            @Html.HiddenFor(model => model.House.ProvinceID, new { style = "width:140px" })
        </div>
        <div class="editor-field">
            @Html.HiddenFor(model => model.House.DistrictID, new { style = "width:140px" })
        </div>
        <div class="editor-field">
            @Html.HiddenFor(model => model.House.Ordinate, new { style = "width:140px" })
        </div>
    </div>

    <div class="infobox" style="width: 579px; margin-left: 10px; float: left; height: 210px;">
        <div class="headerbox" style="width: 395px; margin: 0">
            More Information</div>
        <div class="field">
            <span class="leftlabel" style="width: 50px">Area</span>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.House.Area, new { style = "width:240px", @class = "price", @required = "true" })
                @Html.ValidationMessageFor(model => model.House.Area)
            </div>
            <p class="usdtag">
                m2</p>
        </div>
        <div id="checklist" style="clear: left; color: black; margin-left: 70px">
            @* @Html.CheckBoxFor(model => model.House.HasGara, new { @type = "checkbox", id = "checkbox-1" })*@
            <input type="checkbox" id="checkbox-1-1"  class="regular-checkbox"  value="@Model.House.HasGara" name="HasGara" />
            <label for="checkbox-1-1">
            </label>
            <span>HasGara</span> @*@Html.CheckBoxFor(model => model.House.HasGarden)*@
            <input type="checkbox" id="checkbox-1-2"  class="regular-checkbox" value="@Model.House.HasGarden" name="HasGarden"/>
            <label for="checkbox-1-2">
            </label>
            <span>HasGarden</span> @*@Html.CheckBoxFor(model => model.House.HasKitchen)*@
            <input type="checkbox" id="checkbox-1-3" class="regular-checkbox" value="@Model.House.HasKitchen" name="HasKitchen"/>
            <label for="checkbox-1-3">
            </label>
            <span>Has Kitchen</span>
        </div>
    </div>
    <p>
        <input type="submit" value="Submit" id="submitbutton" style="display: none" />
    </p>
    <p>
        <input type="button" value="Submit" onclick="Submit()" style="margin-right: 10px;
            float: right; margin-top: 10px; width: 100px; background-color: sienna; color: whitesmoke !important" />
    </p>
    <p>
        <input type="reset" value="Reset" style="margin-right: 10px; float: right; margin-top: 10px;
            width: 100px; background-color: sienna; color: whitesmoke !important" />
    </p>
    }
    <div class="error">
    </div>
}
else
{
    <h3>
        You must login to edit your posts or register an account to begin post.</h3>
}
<script type="text/javascript">
    var errorperday = $('#House_PricePerDay').next("span");
    var errorweek = $('#House_PricePerWeek').next("span");
    var errorpermonth = $('#House_PricePerMonth').next("span");
    function Submit() {
        var priceperday = parseFloat($('#House_PricePerDay').val());
        var priceperweek = parseFloat($('#House_PricePerWeek').val());
        var pricepermont = parseFloat($('#House_PricePerMonth').val());

        $('.error').css("display", "none");
        //Validate not input price
        if (($('#House_PricePerDay').val() == '' && $('#House_PricePerWeek').val() == '' && $('#House_PricePerMonth').val() == ''
        ) || (priceperday == 0 && priceperweek == 0 && pricepermont == 0)) {
            $('.error').css("display", "block");
            $('.error').html("Please input price");
            return false;
        }

        //Validate  price
        if (priceperday > 0 && priceperweek > 0 && pricepermont > 0) {
            if (priceperday >= priceperweek || priceperday >= pricepermont || priceperweek >= pricepermont) {
                $('.error').css("display", "block");
                $('.error').html("Price must be follow price per day < price per week < price per month");
                return false;
            }
        }
        //Validate  price
        if (priceperday > 0 && priceperweek > 0) {
            if (priceperday >= priceperweek) {
                $('.error').css("display", "block");
                $('.error').html("Price must be follow price per day < price per week ");
                return false;
            }
        }
        //Validate  price
        if (priceperday > 0 && pricepermont > 0) {
            if (priceperday >= pricepermont) {
                $('.error').css("display", "block");
                $('.error').html("Price must be follow price per day < price per month ");
                return false;
            }
        }
        //Validate  price
        if (priceperweek > 0 && pricepermont > 0) {
            if (priceperweek >= pricepermont) {
                $('.error').css("display", "block");
                $('.error').html("Price must be follow price per week < price per month ");
                return false;
            }
        }
        $('#submitbutton').click();



    }
    $(function () {
        var hasgara = $('#checkbox-1-1').val();
        var hasgarder = $('#checkbox-1-2').val();
        var haskit = $('#checkbox-1-3').val();
        if (hasgara == "True") {
            $('#checkbox-1-1').attr('checked', 'checked');
        }
        if (hasgarder == "True") {
            $('#checkbox-1-2').attr('checked', 'checked');
        }
        if (haskit == "True") {
            $('#checkbox-1-3').attr('checked', 'checked');
        }



    });

    $('#House_PricePerDay').keydown(function () {

        var len = this.value.length;
        if (len >= 10) {
            this.value = this.value.substring(0, 10);

        }
    });
    $('#House_PricePerWeek').keydown(function () {

        var len = this.value.length;
        if (len >= 10) {
            this.value = this.value.substring(0, 10);

        }
    });
    $('#House_PricePerMonth').keydown(function () {
        var len = this.value.length;
        if (len >= 10) {
            this.value = this.value.substring(0, 10);

        }
    });
    $('#House_Area').keydown(function () {
        var len = this.value.length;
        if (len >= 10) {
            this.value = this.value.substring(0, 10);

        }
    });
    $('#House_PricePerDay').blur(function () {
        if ($('#House_PricePerDay').val() == "") {
            $(this).val("0");
            $(errorperday).css('display', 'none');
        }
        if (parseFloat($('#House_PricePerDay').val()) == 0) {
            $(this).val("0");
        }
        else {
            $(errorperday).css('display', 'block');
        }
    });



    $('#House_PricePerWeek').blur(function () {
        if ($('#House_PricePerWeek').val() == "") {
            $(this).val("0");
            $(errorweek).css('display', 'none');
        }
        if (parseFloat($('#House_PricePerWeek').val()) == 0) {
            $(this).val("0");
        }
        else {
            $(errorweek).css('display', 'block');
        }
    });
    $('#House_PricePerMonth').blur(function () {
        if ($('#House_PricePerMonth').val() == "") {
            $(this).val("0");
            $(errorpermonth).css('display', 'none');
        }
        if (parseFloat($('#House_PricePerMonth').val()) == 0) {
            $(this).val("0");
        } else {
            $(errorpermonth).css('display', 'block');
        }
    });

    $('#House_NumBadroom').blur(function () {
        if ($('#House_NumBadroom').val() == "") {
            $(this).val("0");
        }
    });
    $('#House_NumSittingRoom').blur(function () {
        if ($('#House_NumSittingRoom').val() == "") {
            $(this).val("0");
        }
    });
    $('#House_NumOfWC').blur(function () {
        if ($('#House_NumOfWC').val() == "") {
            $(this).val("0");
        }
    });
    $('#House_Storey').blur(function () {
        if ($('#House_Storey').val() == "") {
            $(this).val("0");
        }
    });
    $('#House_Area').blur(function () {
        if ($('#House_Area').val() == "") {
            $(this).val("0");
        }
    });
    $('#House_NumBadroom').keydown(function () {
        var len = this.value.length;
        if (len >= 4) {
            this.value = this.value.substring(0, 4);

        }
    });
    $('#House_NumSittingRoom').keydown(function () {
        var len = this.value.length;
        if (len >= 4) {
            this.value = this.value.substring(0, 4);

        }
    });
    $('#House_NumOfWC').keydown(function () {
        var len = this.value.length;
        if (len >= 4) {
            this.value = this.value.substring(0, 4);

        }
    });
    $('#House_Storey').keydown(function () {
        var len = this.value.length;
        if (len >= 4) {
            this.value = this.value.substring(0, 4);

        }
    });
    $('.price').keydown(function (event) {
        if (event.shiftKey) {
            event.preventDefault();
        }
        if (event.keyCode == 190 || event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 9) {
        }
        else {

            if (event.keyCode < 95) {
                if (event.keyCode < 48 || event.keyCode > 57) {

                    event.preventDefault();

                }
            } else {
                if (event.keyCode < 96 || event.keyCode > 105) {

                    event.preventDefault();

                }
            }
        }

    });
    $('.number').keydown(function (event) {
        if (event.shiftKey) {
            event.preventDefault();
        }
        if (event.keyCode == 8 || event.keyCode == 9) {
        }
        else {

            if (event.keyCode < 95) {
                if (event.keyCode < 48 || event.keyCode > 57) {

                    event.preventDefault();

                }
            } else {
                if (event.keyCode < 96 || event.keyCode > 105) {

                    event.preventDefault();

                }
            }
        }

    });

    $('#House_AddressDetail').blur(function () {
        var address = $(this).val();
        $('#search_address').val(address);
    });
</script>
